<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>训练模式</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container {
            margin-top: 20px;
            width: 90%;
            max-width: 600px;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        .char-display {
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }
        .morse-code {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .dot, .dash {
            display: inline-block;
            height: 10px;
            background-color: black;
        }
        .dot {
            width: 10px;
            border-radius: 50%;
        }
        .dash {
            width: 40px;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>训练模式</h1>
        <div id="moduleContent"></div>
    </div>

    <script>
        const morseCodeMap = {
            'A': '.-', 'B': '-...', 'C': '-.-.', 'D': '-..', 'E': '.', 'F': '..-.',
            'G': '--.', 'H': '....', 'I': '..', 'J': '.---', 'K': '-.-', 'L': '.-..',
            'M': '--', 'N': '-.', 'O': '---', 'P': '.--.', 'Q': '--.-', 'R': '.-.',
            'S': '...', 'T': '-', 'U': '..-', 'V': '...-', 'W': '.--', 'X': '-..-',
            'Y': '-.--', 'Z': '--..', '1': '.----', '2': '..---', '3': '...--',
            '4': '....-', '5': '.....', '6': '-....', '7': '--...', '8': '---..',
            '9': '----.', '0': '-----'
        };

        let currentCharIndex = 0;
        const chars = Object.keys(morseCodeMap);

        function showMorseTable() {
            const char = chars[currentCharIndex];
            const code = morseCodeMap[char];
            const morseCodeHtml = code.split('').map(symbol => {
                if (symbol === '.') {
                    return '<span class="dot"></span>';
                } else if (symbol === '-') {
                    return '<span class="dash"></span>';
                } else {
                    return '<span></span>';
                }
            }).join('');
            document.getElementById('moduleContent').innerHTML = `
                <div class="char-display">${char}</div>
                <div class="morse-code">${morseCodeHtml}</div>
                <button onclick="showNextChar()">下一个字符</button>
                <select id="charSelect" onchange="selectChar()">
                    ${chars.map((c, index) => `<option value="${index}">${c}</option>`).join('')}
                </select>
            `;
            document.getElementById('charSelect').value = currentCharIndex;
        }

        function showNextChar() {
            currentCharIndex = (currentCharIndex + 1) % chars.length;
            showMorseTable();
        }

        function selectChar() {
            currentCharIndex = document.getElementById('charSelect').value;
            showMorseTable();
        }

        // 初始化显示
        showMorseTable();
    </script>
</body>
</html>